import React from 'react';
import {connect} from 'dva';
import { Form, Input, Popconfirm, Row, Button, Col, Table, Radio, Popover, Select, message } from 'antd';
import Constants from '../../../utils/Constants';
import RightBox from '../../../components/commons/RightBox';
import RightConstants from '../../../utils/RightConstants';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const R = require('ramda');

const cash = Form.create()(class Cash extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cashId: undefined,           //当前提现ID
            operateMemo: undefined,      //当前处理提现的操作备注
        }
    }

    componentDidMount() {
        this.props.dispatch({ type: 'cash/queryPresentRecordsPage', payload: { page: Constants.DEFAULT_PAGE, status: "1" } });
    }

    handleDelete = id => {
        this.props.dispatch({
            type: 'cash/deletePresentRecord',
            payload: {
                id,
                onSuccess: this.handleSearch
            }
        })
    }

    handleSearch = flag => {
        let newPage = this.props.cash.page;
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'cash/queryPresentRecordsPage',
            payload: {
                ...this.props.form.getFieldsValue(),
                page: newPage
            }
        });
    };

    changeMemo = (e) => {
        this.setState({ operateMemo: e.target.value })
    }

    openPop = (cashId) => {
        this.setState({ cashId, operateMemo: undefined });
    }

    closePop = () => {
        this.setState({ cashId: undefined, operateMemo: undefined });
    }

    onConfirm = (operateResult) => {
        if (!operateResult && R.isNil(this.state.operateMemo)) {
            message.error("若拒绝提现申请，处理备注不能为空"); 
            return;
        }
        this.props.dispatch({
            type: 'cash/updatePresentRecord',
            payload: {
                id: this.state.cashId,
                operatedesc: this.state.operateMemo,
                status: operateResult ? "2" : "3",
                onSuccess: () => {
                    this.closePop();
                    this.handleSearch();
                }
            }
        })
    }


    columns = [
        { title: '申请人', dataIndex: 'creator', key: 'creator' },
        { title: '申请时间', dataIndex: 'createtime', key: 'createtime' },
        { title: '申请提现金额', dataIndex: 'amt', key: 'amt'},
        { title: '处理人', dataIndex: 'operator', key: 'operator' },
        { title: '处理时间', dataIndex: 'operatetime', key: 'operatetime' },
        { title: '处理备注', dataIndex: 'operatedesc', key: 'operatedesc'},
        { title: '当前状态', key: 'status',
            render(record){
                if(record.status === "1"){
                    return "待处理";
                }else if(record.status === "2"){
                    return "已处理";
                }else if(record.status === "3"){
                    return "已拒绝";
                }
            }
        },
        {
            title: '操作',
            render: (record) => {
                let voidLink = <RightBox resource={RightConstants.CAPITAL.CAPITAL_CASH_EDIT}>
                                    <Popover key={record.id} 
                                        content={<div>
                                                    <div>
                                                        <Input placeholder="若拒绝请输入备注" disabled={false} maxLength="500" value={this.state.operateMemo} onChange={this.changeMemo.bind(this)} />
                                                    </div>
                                                    <div style={{ marginTop: 3 }}>
                                                        <span style={{ float: 'right' }}><Button onClick={this.closePop.bind(this)}>取消</Button></span>
                                                        <span style={{ marginLeft: 50 }}><Button onClick={this.onConfirm.bind(this, true)}>同意申请</Button></span>
                                                        <span><Button onClick={this.onConfirm.bind(this, false)}>拒绝申请</Button></span>
                                                    </div>
                                                </div>}
                                        title='处理提现申请' 
                                        trigger="click" 
                                        visible={this.state.cashId === record.id} 
                                        onVisibleChange={this.openPop.bind(this, record.id)}>
                                        <a href="#">处理申请</a>
                                    </Popover>
                                 </RightBox>

                let deleteLink = <RightBox resource={RightConstants.CAPITAL.CAPITAL_CASH_DELETE}>
                                    <Popconfirm onConfirm={this.handleDelete.bind(this, record.id)} okText="是" cancelText="否" placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                                        <a href="#">删除</a>
                                    </Popconfirm>
                                 </RightBox>
                return <span>{record.status === "1" ? voidLink : null}</span>
            }
        }
    ];

    render() {
        let formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };
        const { getFieldDecorator } = this.props.form;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.cash.page.size,
            current: this.props.cash.page.page,
            total: this.props.cash.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.cash.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'cash/queryPresentRecordsPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.cash.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'cash/queryPresentRecordsPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label={'状态'}>
                            {getFieldDecorator('status', {
                                initialValue: "1"
                            })(
                                <RadioGroup style={{ width: 800 }}>
                                    <Radio value="1">待处理</Radio>
                                    <Radio value="2">已处理</Radio>
                                    <Radio value="3">已拒绝</Radio>
                                </RadioGroup>
                            )}
                        </FormItem>      
                    </Col>
                    <Col span={9} style={{ marginLeft: 24}}>
                        <Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this, true)} size={'default'}>查询</Button>
                    </Col>
                </Row>
                <Table
                    rowKey='id'
                    dataSource={this.props.cash.list}
                    loading={this.props.loading}
                    columns={this.columns}
                    bordered={true}
                    size={'middle'}
                    pagination={pagination} />
            </div>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.cash, cash: state.cash
    };
}

export default connect(mapStateToProps)(cash);
